<template>
    <section
        :style="{
            paddingTop: confDiy.paddingTop + 'px',
            paddingBottom: confDiy.paddingBottom + 'px',
            marginTop: confDiy.marginTop + 'px',
            marginBottom: confDiy.marginBottom + 'px',
            background: `linear-gradient(
                ${confDiy.bgEdg}deg,
                ${confDiy.bgColorOne},
                ${confDiy.bgColorTow},
                ${confDiy.bgColorThree})`
        }"
    >
        <div class="m-auto px-10">
            <div
                v-if="confDiy.title || confDiy.intro"
                class="flex flex-col gap-1.5"
                :style="{ marginBottom: confDiy.headerBottom + 'px' }"
            >
                <h3
                    v-if="confDiy.title"
                    class="text-center text-7xl font-bold"
                    :style="{ color: confDiy.titleColor }"
                >
                    {{ confDiy.title }}
                </h3>

                <p
                    v-if="confDiy.intro"
                    class="text-center"
                    :style="{ color: confDiy.introColor }"
                >
                    {{ confDiy.intro }}
                </p>
            </div>

            <template v-for="(item, index) in dataDiy">
                <div
                    v-if="item.isEnable"
                    :key="index"
                    class="flex gap-16"
                    :class="{ 'flex-row-reverse': item.layout === 'right' }"
                    :style="{
                        marginTop: item.marginTop + 'px',
                        marginBottom: item.marginBottom + 'px'
                    }"
                >
                    <div class="flex items-center shrink-0 w-[440px] h-[310px]">
                        <el-image
                            :src="appStore.toAbsoluteUrl(item.image)"
                            :lazy="true"
                            class="w-full h-full"
                        />
                    </div>
                    <div class="flex flex-col py-3 h-[310px]">
                        <div>
                            <h3 class="text-6xl mb-7" :style="{ color: item.nameColor }">
                                {{ item.name }}
                            </h3>

                            <p
                                v-if="item.textOne"
                                class="text-lg line-clamp-6 leading-relaxed mb-4"
                                :style="{ color: item.textColor }"
                            >
                                {{ item.textOne }}
                            </p>

                            <p
                                v-if="item.textTow"
                                class="text-lg line-clamp-6 leading-relaxed mb-4"
                                :style="{ color: item.textColor }"
                            >
                                {{ item.textTow }}
                            </p>
                        </div>
                        <div v-if="item.isShowBtn" class="mt-8">
                            <el-button
                                type="primary"
                                size="large"
                                :style="{
                                    color: item.btnTxtColor,
                                    background: item.btnBgColor,
                                    borderColor: item.btnBgColor
                                }"
                            >
                                {{ item.btnName }}
                            </el-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { ProfileConfigType, ProfileDataType } from '../index.ts'
import useAppStore from '@/stores/modules/app'

const props = defineProps({
    diyData: {
        type: Object,
        default: () => ({
            config: {} as ProfileConfigType,
            data: [] as ProfileDataType[]
        })
    }
})

const appStore = useAppStore()

// 装修数据
const confDiy = ref({} as ProfileConfigType)
const dataDiy = ref([] as ProfileDataType[])

// 监听数据
watch(
    () => props.diyData,
    (val) => {
        confDiy.value = val.config
        dataDiy.value = val.data
    }, { immediate: true }
)
</script>
